import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import './deskdiary.scss'
import '@/base/scss/common.scss'
import Vue from 'vue'
import ElementUI from 'element-ui'
import SelectTpl from '../script/index.js'
import UnifyHeader from 'components/header/header'
import UnifyFooter from 'components/footer/footer'
import Suspension from 'components/suspension/suspension'
import Api from '@/api.js'
import Utils from 'components/component/util'
import mixins from '@/mixins'
import {DEVELOPMENT, PRODUCTION} from "../../config"

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

Vue.mixin(mixins)
Vue.use(ElementUI)
let selTpl = new SelectTpl()
Vue.use(Utils)  // 工具函数

//eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showSuspensionHeight: 0, // 显示悬浮组件的高度
    customizationItem: 'color',
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    frameShowBool: true, //true不选择框画尺寸是显示的dome   -false时候显示选择尺寸dome
    frameSize: {}, //框画的尺寸
    nowSize: '', //当前框的尺寸
    nowColor: '', //当前color
    skuCode: '', //用来取价钱的sku
    price: '', //框画的价钱
    previewImageUrl: '', //框形预览图
    nowColorZW: '', //当前颜色中文
    frameType: '', //框形
    framePage: '', //页数
    frameColor: '', //颜色
    editImageUrl: '', //编辑框背景图
    skuId: '', //产品的skuId
    templateCode: ''//产品的templateCode
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
    },
    suspendPullDown: function (type) {
      this.customizationItem = type
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    /**
     * 点击更新画册颜色
     * index: 点击对象的索引
     */
    updateColorFn(index) {
      if (this.frameShowBool) {
        this.frameShowBool = false
        this.updateSizeFn(0)
      }
      this.nowColor = this.frameColor[index]
      this.updataSkuData()
      return true
    },
    /**
     * 点击更新框画尺寸
     * index: 点击对象的索引
     */
    updateSizeFn(index) {
      if (this.frameShowBool) {
        this.frameShowBool = false
        this.updateColorFn(0)
      }
      this.nowSize = this.frameSize[index]
      selTpl.setShowImgSize(`box${this.nowSize.name.substr(0, 1)}`, 'picContainerOne')
      this.updataSkuData()
      return true
    },
    /**
     * 更新sku
     */
    updataSkuData() {
      this.skuCode = this.getFromSession("category") + '.' + this.nowSize.code + '.' + this.nowColor.code
      Api.sku.querySku({
        category: this.getFromSession("category"),
        parameter: this.skuCode
      }).then(res => {
        this.previewImageUrl = res.data.previewImageUrl // 框形预览图
        this.editImageUrl = res.data.editImageUrl // 编辑框背景图
        this.price = res.data.price
        this.skuId = res.data.skuId
        this.templateCode = res.data.templateCode
        this.nowColorZW = this.nowColor.name
      })
    },
    /**
     * 开始定制
     */
    startCustom() {
      if (localStorage['userDbId']) {
        sessionStorage['titleName'] = '台历'
        sessionStorage['tailiType'] = this.nowSize.code === '195X145' ? '横' : '竖'
        if (!this.frameShowBool) {
          sessionStorage['bbsSlsectDate'] = JSON.stringify({
            colorName: this.nowColor.code,
            name: "台历." + this.nowColorZW + "." + this.nowSize.code,
            skuCode: this.skuCode,
            category: this.getFromSession("category"),
            price: this.price,
            skuId: this.skuId,
            size: this.nowSize.code,
            titleName: "台历",
            tplCode: this.templateCode,
            editCnfName: this.templateCode + '_single'
          })
          location.href = '/album/tlEdit'
        } else {
          this.$message({
            showClose: true,
            iconClass: 'atrup_Message',
            message: '请先选择需要定制的尺寸和颜色 !',
            type: 'success'
          })
        }
      } else {
        this.setUrlCallback()
      }
    }
  },
  mounted() {
    let that = this
    sessionStorage['urlQuery'] = JSON.stringify({
      category: this.getQueryString('category', 'taili'),
      defDbId: this.getQueryString('defDbId', 'f80b4c98-15ca-4da0-b482-0c8270c2eac6')
    })
    //获取框画的类型
    Api.sku.queryAttributes({category: this.getFromSession("category")}).then(res => {
      if (res) {
        this.frameSize = res.data.attributes[1].attributeValues
        this.frameColor = res.data.attributes[0].attributeValues
        setTimeout(function () {
          that.nowSize = that.frameSize[0]
          that.nowColor = that.frameColor[0]
          that.nowColorZW = that.nowColor.name
          that.updataSkuData()
        }, 20)
      }
    })
    this.$nextTick(function () {
      that.showSuspensionHeight = that.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    document.body.style.cssText = 'opacity:1;'
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  }
})
